<template>
  <div class="home">
    <div class="first-screen">
      <!-- :style="{ cursor: isgrab ? 'grab' : 'grabbing' }" -->
      <div class="topbanner">
        <div class="swiper-container" id="swiperban1">
          <div class="swiper-wrapper">
            <div class="swiper-slide banner1">
              <div class="ban1-content">
                <div>
                  <h1>MESEE QUICK</h1>
                  <p>
                    面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。北京时间18日晚，世界女排联赛第五周赛事开打，中国女排3比0干净利落地战胜俄罗斯女排。朱婷复出.
                  </p>
                  <a href="">
                    继续了解<img
                      src="../../assets/home-img/svg/rightico.svg"
                      width="7"
                      height="10"
                      alt="更多"
                    />
                  </a>
                </div>
              </div>
            </div>
            <div class="swiper-slide"></div>
            <div class="swiper-slide"></div>
          </div>

          <!-- 如果需要导航按钮 -->
          <div class="swiper-button-prev prev"></div>
          <div class="swiper-button-next next"></div>
        </div>
      </div>
      <div class="bottom-introduction">
        <div class="piecemeal flclear">
          <div>
            <div class="pie-top">
              <i></i>
              <count-to
                :class="'zinum'"
                :start-val="0"
                :autoplay="true"
                :end-val="1505"
                :duration="5000"
              />
            </div>
            <div class="pie-bot">
              <p>面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。</p>
            </div>
          </div>
          <div>
            <div class="pie-top">
              <i></i>
              <count-to
                :class="'zinum'"
                :start-val="0"
                :autoplay="true"
                :end-val="846"
                :duration="5000"
              />
            </div>
            <div class="pie-bot">
              <p>面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。</p>
            </div>
          </div>
          <div>
            <div class="pie-top">
              <i></i>
              <count-to
                :class="'zinum'"
                :start-val="0"
                :autoplay="true"
                :end-val="759"
                :duration="5000"
              />
            </div>
            <div class="pie-bot">
              <p>面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。</p>
            </div>
          </div>
          <div>
            <div class="pie-top">
              <i></i>
              <count-to
                :class="'zinum'"
                :start-val="0"
                :autoplay="true"
                :end-val="489"
                :duration="5000"
              />
            </div>
            <div class="pie-bot">
              <p>面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。</p>
            </div>
          </div>
        </div>
        <div class="synopsis">
          <div class="syn-left">
            <a href="">
              <img
                src="../../assets/home-img/svg/logo-black.svg"
                height="88"
                alt="logo"
              />
            </a>
          </div>
          <div class="syn-right">
            <p>
              面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。北京时间18日晚，世界女排联赛第五周赛事开打，中国女排3比0干净利落地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。北京时间18日晚，世界女排联赛第五周赛事开打，中国女排3比0干净利落地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。北京时间18日晚，世界女排联赛第五周赛事开打，中国女排3比0干净利落地战胜俄。面对老对手俄罗斯女排，中国女排一直牢牢。
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 轮播首屏结束 -->
    <!-- 第二部分  一应俱全的营销-->
    <div class="marketing">
      <div class="marktop">
        <img
          src="../../assets/home-img/svg/business.svg"
          width="32"
          alt="业务"
        />
        <h2>一应俱全的营销</h2>
        <p>
          面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。
        </p>
      </div>
      <marketing :product="product" v-if="productShow"></marketing>
      <!--  -->
      <div class="other">
        <p>
          面对老对手俄罗斯女排，中国女排一直牢牢掌握着面对老对手俄罗斯女排，中<span
            >中国女排一直牢牢掌</span
          >
        </p>
      </div>
    </div>
    <!-- 第三部分 -->
    <div class="contactus">
      <div class="items">
        <a href="">
          <img src="../../assets/home-img/svg/logo-xbox.svg" />
        </a>
        <a href="">
          <img src="../../assets/home-img/svg/logo-cat.svg" />
        </a>
        <a href="">
          <img src="../../assets/home-img/svg/logo-yin.svg" />
        </a>
        <a href="">
          <img src="../../assets/home-img/svg/logo-niu.svg" />
        </a>
        <a href="" class="n">
          <img src="../../assets/home-img/svg/logo-vk.svg" />
        </a>
        <a href="">
          <img src="../../assets/home-img/svg/logo-ie.svg" />
        </a>
      </div>
      <div class="contactall">
        <div class="cont-introduce">
          <img src="../../assets/home-img/all-svg/bin1-white.svg" />
          <h2>面对俄罗斯老对手</h2>
          <p>
            面对俄罗斯老对手面对俄罗斯老对手面对俄罗斯老对手面对俄罗斯老对手面对俄罗斯老对手面对俄罗斯老对手
          </p>
        </div>
        <div class="contact-mode">
          <div class="flclear">
            <div class="item">
              <label for="user">你的称呼</label>
              <div>
                <p>
                  <img src="../../assets/home-img/svg/inp-user.svg" alt="" />
                </p>
                <input type="text" id="user" placeholder="请输入" />
              </div>
            </div>
            <div class="item">
              <label for="company">你的公司名称</label>
              <div>
                <p>
                  <img src="../../assets/home-img/svg/inp-company.svg" alt="" />
                </p>
                <input type="text" id="company" placeholder="请输入" />
              </div>
            </div>
            <div class="item">
              <label for="technology">你需要的技术支持</label>
              <div>
                <p>
                  <img
                    src="../../assets/home-img/svg/inp-technology.svg"
                    alt=""
                  />
                </p>
                <input type="text" id="technology" placeholder="请输入" />
              </div>
            </div>
            <div class="item">
              <label for="phone">你的联系电话</label>
              <div>
                <p>
                  <img src="../../assets/home-img/svg/inp-phone.svg" alt="" />
                </p>
                <input type="text" id="phone" placeholder="请输入" />
              </div>
            </div>
            <div class="item">
              <label for="email">你的电子邮箱</label>
              <div>
                <p>
                  <img src="../../assets/home-img/svg/inp-email.svg" alt="" />
                </p>
                <input type="text" id="email" placeholder="请输入" />
              </div>
            </div>
            <div class="item">
              <div class="btn-sub">
                提交你的信息以及需求
                <img src="../../assets/home-img/svg/rightico.svg" alt="更多" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第四部分 -->
    <div class="exhibition">
      <div class="marktop">
        <img
          src="../../assets/home-img/svg/business.svg"
          width="32"
          alt="业务"
        />
        <h2>一应俱全的营销</h2>
        <p>
          面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。
        </p>
      </div>
      <div class="markbot">
        <div>
          <div class="m-item m-bg-1">
            <img src="../../assets/home-img/pexels-fauxels.png" />
          </div>
          <div class="m-item m-cont-1">
            <span>
              <img src="../../assets/home-img/all-svg/bin1-blue1.svg" />
            </span>
            <h3>面对老对手俄罗斯女人</h3>
            <p>
              面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢
            </p>
            <div class="mabot-btn">
              <a href="">盛世嫡妃的</a>
            </div>
          </div>
          <div class="m-item m-bg-2">
            <img src="../../assets/home-img/pexels-christina.png" />
          </div>
          <div class="m-item m-cont-2">
            <span>
              <img src="../../assets/home-img/all-svg/bin1-yellow.svg" />
            </span>
            <h3>面对老对手俄罗斯女人</h3>
            <p>
              面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢
            </p>
            <div class="mabot-btn">
              <a href="">盛世嫡妃的</a>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 第五部分 -->
    <div class="newsarticle">
      <div class="marktop">
        <img
          src="../../assets/home-img/all-svg/bin1-blue.svg"
          width="32"
          alt="业务"
        />
        <h2>一应俱全的营销</h2>
        <p>
          面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。
        </p>
      </div>
      <news :newsarticle="newsarticle"></news>
      <div class="other">
        <p>
          面对老对手俄罗斯女排，中国女排一直牢牢掌握着面对老对手俄罗斯女排，中
          <span>中国女排一直牢牢掌</span>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import marketing from "../../components/marketing.vue"
import Swiper from "swiper";
import countTo from 'vue-count-to'
import news from "../../components/news.vue"
export default {
  data() {
    return {
      // cursor:grab 
      isgrab: false,
      product:
        [
          {
            bgurl: require('../../assets/home-img/bin1-bg.png'),
            neibgurl: require('../../assets/home-img/all-svg/bin1-blue.svg'),
            linkurl: '',
            title: '面对俄罗斯老对手女',
            key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
            content: " 面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。  北京时间18日晚，世界面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。  北京时间18日晚，世界女排联赛第五周面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。  北京时间18日晚，世界女排联赛第五周女排联赛第五周赛事开打  面对老对手俄罗斯女排， "
          },
          {
            bgurl: require('../../assets/home-img/bin1-bg.png'),
            neibgurl: require('../../assets/home-img/all-svg/bin1-green.svg'),
            linkurl: '',
            title: '面对俄罗斯老对手女',
            key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
            content: " 面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。  北京时间18日晚，世界女排联赛第五周赛事开打  面对老对手俄罗斯女排， "
          },
          {
            bgurl: require('../../assets/home-img/bin1-bg.png'),
            neibgurl: require('../../assets/home-img/all-svg/bin1-blue.svg'),
            linkurl: '',
            title: '面对俄罗斯老对手女',
            key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
            content: " 面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。  北京时间18日晚，世界女排联赛第五周赛事开打  面对老对手俄罗斯女排， "
          },
          {
            bgurl: require('../../assets/home-img/bin1-bg.png'),
            neibgurl: require('../../assets/home-img/all-svg/bin1-blue1.svg'),
            linkurl: '',
            title: '面对俄罗斯老对手女',
            key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
            content: " 面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。  北京时间18日晚，世界女排联赛第五周赛事开打  面对老对手俄罗斯女排， "
          },
          {
            bgurl: require('../../assets/home-img/bin1-bg.png'),
            neibgurl: require('../../assets/home-img/all-svg/bin1-yellow.svg'),
            linkurl: '',
            title: '面对俄罗斯老对手女',
            key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
            content: " 面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。  北京时间18日晚，世界女排联赛第五周赛事开打  面对老对手俄罗斯女排， "
          },
          {
            bgurl: require('../../assets/home-img/bin1-bg.png'),
            neibgurl: require('../../assets/home-img/all-svg/bin1-green.svg'),
            linkurl: '',
            title: '面对俄罗斯老对手女',
            key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
            content: " 面对老对手俄罗斯女排，中国女排一直牢牢掌握着主动权。  北京时间18日晚，世界女排联赛第五周赛事开打  面对老对手俄罗斯女排， "
          }
        ],
      newsarticle: [
        {
          linkbg: require('../../assets/home-img/news/lin-news1.png'),
          title: '面对老对手的俄罗斯女人',
          content: '面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…',
          user: {
            headportrait: require('../../assets/home-img/all-svg/samll-logo.png'),
            username: 'admin',
            sharelink: 'http://www.baidu.com'
          },
          key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
        },
        {
          linkbg: require('../../assets/home-img/news/lin-news1.png'),
          title: '面对老对手的俄罗斯女人',
          content: '面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…',
          user: {
            headportrait: require('../../assets/home-img/all-svg/samll-logo.png'),
            username: 'admin',
            sharelink: 'http://www.baidu.com'
          },
          key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
        },
        {
          linkbg: require('../../assets/home-img/news/lin-news1.png'),
          title: '面对老对手的俄罗斯女人',
          content: '面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…面对老对手俄罗斯面对老对手俄罗斯女排，中国是垫付是否发顺丰排一直牢…',
          user: {
            headportrait: require('../../assets/home-img/all-svg/samll-logo.png'),
            username: 'admin',
            sharelink: 'http://www.baidu.com'
          },
          key: (((1 + Math.random()) * 0x10000) | 0).toString(16),
        },
      ],
      swiper: null,
      productShow: true
    }
  },
  components: {
    countTo,
    news,
    marketing
  },
  methods: {
    swiperstart() {
      this.swiper = new Swiper('#swiperban1', {
        //   direction: 'vertical',
        loop: true,
        // autoplay: {
        //   delay: 2000,
        //   disableOnInteraction: false,
        //   pauseOnMouseEnter: true,
        // },
        //  autoHeight: true, //高度随内容变化
        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },
        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      });
    },


  },

  destroyed() {
  },
  mounted() {
    this.swiperstart()
  }
}
</script>

<style scoped lang="scss">
.home {
  .first-screen {
    background-color: seashell;
    /* height: 100%; */
    height: auto;
    /* position: absolute; */
    width: 100%;
  }

  .topbanner {
    // position: absolute;
    height: auto;
    width: 100%;
    height: 100vh;
    user-select: none;
  }
  .swiper-container {
    width: 100%;
    height: 100%;
    // height: 100vh;
    margin: 0;
    // position: absolute;
  }

  .topbanner .banner1 {
    background: url("../../assets/home-img/banner/banner1.png");
  }
  .prev {
    height: 0;
    width: 0;
    left: 0;
  }
  .next {
    height: 0;
    width: 0;
    position: absolute;
    right: 70px !important;
  }
  .swiper-button-prev::after,
  .swiper-button-next::after {
    content: "";
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    width: 21px;
    height: 35px;
  }
  .swiper-button-prev::after {
    background: url("../../assets/home-img/svg/prev.svg") no-repeat 0 0;
    left: 50px;
  }

  .swiper-button-next::after {
    background: url("../../assets/home-img/svg/next.svg") no-repeat 0 0;
    right: 50px !important;
  }
  // 轮播设置结束

  /* 轮播图内内容 */

  .ban1-content {
    z-index: 50;
    position: absolute;
    /* left: 50%;
    transform: translateX(-50%); */
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 275px;
    max-width: 1530px;
    background-color: transparent;
  }

  .ban1-content > div h1 {
    width: 712px;
    height: 133px;
    font-size: 90px;
    font-family: HYYuanLongHei-AZEW, HYYuanLongHei;
    font-weight: 900;
    color: #ffffff;
    line-height: 133px;
  }

  .ban1-content > div p {
    width: 791px;
    height: 70px;
    font-size: 18px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #ffffff;
    line-height: 35px;
  }

  .ban1-content > div a {
    display: block;
    width: 140px;
    height: 60px;
    background: #0054f7;
    border-radius: 5px;
    line-height: 60px;
    font-size: 20px;
    color: #ffffff;
    text-align: center;
    position: relative;
    margin-top: 61px;
    transition: color 0.5s;
  }

  .ban1-content > div a:hover {
    text-decoration: none;
    color: rgba(255, 255, 255, 0.767);
    img {
      transform: translateX(10px);
    }
  }

  .ban1-content > div a img {
    margin-left: 13px;
    transition: transform 0.5s;
  }

  /* 内容结束 */

  /* 首屏下半部分 */

  .bottom-introduction {
    background: url("../../assets/home-img/introduce-bg.png") no-repeat 0 0;
    width: 100%;
    height: 560px;
    position: relative;
    display: inline-block;
  }

  .piecemeal {
    width: 1530px;
    margin: 0 auto;
    margin-top: -75px;
    position: relative;
    z-index: 100;
  }

  .piecemeal > div {
    width: 360px;
    height: 200px;
    background: #ffffff;
    box-shadow: 0px 20px 20px 0px rgba(0, 0, 0, 0.02);
    border-radius: 10px;
    float: left;
    margin-left: 30px;
    box-sizing: border-box;
  }

  .piecemeal > div:first-child {
    margin: 0;
  }

  .piecemeal > div .pie-top {
    width: 100%;
    height: 75px;
    vertical-align: bottom;
  }

  .piecemeal > div:nth-child(odd) .pie-top i {
    background: #ee5b51;
  }

  .piecemeal > div .pie-top i {
    width: 75px;
    height: 75px;
    background: #0054f7;
    border-radius: 10px 0px 10px 0px;
    display: inline-block;
  }

  .piecemeal > div .pie-top .zinum {
    position: relative;
    display: inline-block;
    // width: 72px;
    height: 35px;
    font-size: 40px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 35px;
    margin-left: 25px;
    top: -8px;
  }

  .piecemeal > div .pie-top .zinum::after {
    content: "+";
    position: absolute;
    top: -12px;
    right: -20px;
    width: 12.63px;
    height: 12.63px;
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    padding: 0;
  }

  .piecemeal > div .pie-bot {
    width: 100%;
  }

  .piecemeal > div .pie-bot p {
    width: 220px;
    height: 50px;
    font-size: 15px;
    color: rgba(0, 0, 0, 0.75);
    line-height: 25px;
    margin-left: 100px;
    margin-top: 20px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  .synopsis {
    width: 1530px;
    margin: 0 auto;
    height: 200px;
    line-height: 200px;
    position: absolute;
    top: 240px;
    left: 0;
    right: 0;
  }

  .synopsis .syn-left {
    vertical-align: middle;
    padding-right: 80px;
    float: left;
    height: 100%;
    border-right: 1px solid #c5c5c5;
  }

  .synopsis .syn-right {
    overflow: hidden;
  }

  .synopsis .syn-right p {
    width: 1135px;
    height: 160px;
    font-size: 20px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 40px;
    margin-top: 12px;
    margin-left: 24px;
  }

  /* 首屏结束 */

  /* 第二部分  一应俱全的营销*/

  .marketing {
    width: 100%;
    margin-top: 125px;
  }

  .marketing .marktop {
    text-align: center;
  }

  .marketing .marktop img {
    margin-bottom: 62px;
  }

  .marketing .marktop h2 {
    position: relative;
    display: block;
    left: 0;
    right: 0;
    margin: 0 auto;
    font-size: 40px;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.85);
    line-height: 35px;
    padding-bottom: 28px;
  }

  .marketing .marktop h2::after {
    content: "";
    width: 35px;
    height: 5px;
    background-color: #0054f7;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -0;
  }

  .marketing .marktop p {
    width: 607px;
    height: 50px;
    font-size: 16px;
    color: #515152;
    line-height: 25px;
    margin: 26px auto 60px;
  }

  // 第三部分
  .contactus {
    margin-top: 104px;
    .items {
      border-top: 1px solid #dadada;
      padding: 60px 0;
      display: flex;
      justify-content: center;
      width: auto;
      min-width: 1100px;
      margin: 0 auto;
      a {
        display: inline-block;
        margin-left: 125px;
        width: 70px;
        height: 70px;
        overflow: hidden;
        img {
          width: 70px;
          height: 70px;
        }
      }
      a:hover {
        img {
          position: relative;
          left: 0;
          top: -100px;
          filter: drop-shadow(#0054f7 0 100px);
        }
      }
      a.n {
        width: 123px;
        img {
          width: 123px;
        }
      }
      a:first-child {
        margin: 0;
      }
    }

    .contactall {
      width: 100%;
      height: 510px;
      position: relative;
      background: url("../../assets/home-img/contact-bg.png") no-repeat 00 00;
      // border: 1px solid red;
      // background-size: 100%;
      .cont-introduce {
        position: absolute;
        left: 186.5px;
        top: 92px;
        img {
          width: 40px;
          height: 40px;
          vertical-align: top;
          margin-right: 35px;
        }
        h2 {
          width: 315px;
          height: 40px;
          font-size: 35px;
          font-weight: 600;
          color: #ffffff;
          line-height: 40px;
          display: inline-block;
          vertical-align: middle;
          position: relative;
          margin-bottom: 60px;
        }
        h2::after {
          content: "";
          position: absolute;
          height: 5px;
          width: 50px;
          left: 0;
          bottom: -36px;
          background: #fff;
        }
        p {
          width: 452px;
          height: 60px;
          font-size: 18px;
          font-weight: 400;
          color: #ffffff;
          line-height: 30px;
          margin-left: 75px;
        }
      }
      .contact-mode {
        position: absolute;
        display: inline-block;
        bottom: -220px;
        width: 1530px;
        // width: 1460px;
        height: 370px;
        background: #ffffff;
        box-shadow: 0px 20px 30px 0px rgba(0, 0, 0, 0.05);
        border-radius: 15px;
        left: 0;
        right: 0;
        margin: 0 auto;
        > div {
          // height: 100%;
          // width: 100%;
          height: auto;
          //   width: 1270px;
          box-sizing: border-box;
          width: 100%;
          padding: 0 95px;
          padding-top: 70px;

          .item {
            width: 340px;
            float: left;
            margin-bottom: 40px;
            label {
              position: relative;
              font-size: 16px;
              color: rgba(0, 0, 0, 0.75);
            }
            label::after {
              content: "*";
              color: #e02020;
              position: absolute;
              top: 2px;
              right: -15px;
              font-size: 16px;
            }
            > div {
              width: 100%;
              height: 55px;
              line-height: 55px;
              border: 1px solid #dae7ff;
              border-radius: 5px;
              overflow: hidden;
              margin-top: 10px;
              position: relative;
              transition: all 0.3s;

              p {
                height: 100%;
                width: 55px;
                background: #eef3f9;
                box-sizing: border-box;
                float: left;
                display: table-cell;
                vertical-align: middle;
                text-align: center;
                img {
                  width: 20px;
                  height: 20px;
                  vertical-align: middle;
                }
              }
              input {
                background: #ffffff;
                outline: none;
                height: 100%;
                overflow: hidden;
                box-sizing: border-box;
                font-size: 16px;
                padding: 0 23px;
                border: none;
                &:not(:placeholder-shown) {
                  border: 1px solid #03a9f4;
                  + .g_button_search {
                    opacity: 1;
                  }
                } 
                &:placeholder-shown {
                  + .g_button_search {
                    opacity: 0;
                  }
                }
              }
              &:focus-within {
                transform: translateY(-4px);
                box-shadow: 4px 4px 10px 2px #ddd;
              }
            }
          }

          .item:nth-child(2),
          .item:nth-child(5) {
            margin: 0 125px;
          }
          .btn-sub {
            float: left;
            width: 340px;
            height: 55px;
            position: relative;
            text-align: center;
            line-height: 55px;
            font-size: 16px;
            font-weight: 500;
            color: #ffffff;
            background: #0054f7;
            border-radius: 5px;
            border: none !important;
            margin-top: 26px !important;
            cursor: pointer;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
              0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15),
              0 8px 8px rgba(0, 0, 0, 0.15);
            img {
              width: 7px;
              height: 10px;
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              right: 23px;
            }
          }
        }
      }
    }
  }
  // 第四部分
  .exhibition {
    margin-top: 400px;
    .marktop {
      text-align: center;
      img {
        margin-bottom: 62px;
      }
      h2 {
        position: relative;
        display: block;
        left: 0;
        right: 0;
        margin: 0 auto;
        font-size: 40px;
        font-weight: 600;
        color: rgba(0, 0, 0, 0.85);
        line-height: 35px;
        padding-bottom: 28px;
      }
      h2::after {
        content: "";
        width: 35px;
        height: 5px;
        background-color: #0054f7;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: -0;
      }
      p {
        width: 607px;
        height: 50px;
        font-size: 16px;
        color: #515152;
        line-height: 25px;
        margin: 26px auto 60px;
      }
    }
    .markbot {
      width: 100%;
      height: auto;
      margin: 160px 0 140px;
      > div {
        display: flex;
        .m-item {
          box-sizing: border-box;
          min-width: 475px;
          height: 630px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          flex: 1;
          span {
            display: inline-block;
            width: 60px;
            height: 60px;
            border-radius: 50%;
            background: #fff;
            text-align: center;
            line-height: 60px;
            img {
              width: 25px;
              height: 25px;
              vertical-align: middle;
            }
          }
          h3 {
            max-width: 240px;
            font-size: 24px;
            font-family: MFJianHei_Noncommercial-Regular,
              MFJianHei_Noncommercial;
            color: #010101;
            line-height: 35px;
            margin: 0 auto;
            margin-top: 52px;
            margin-bottom: 45px;
          }
          p {
            max-width: 406px;
            line-height: 35px;
            // -webkit-text-stroke: 1px #979797;
            // text-stroke: 1px #979797;
            color: #979797;
            font-size: 15px;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
          }
          .mabot-btn {
            margin-top: 52px;
            width: 138px;
            height: 47px;
            background: #116dfa;
            border-radius: 8px;
            text-align: center;
            line-height: 47px;
            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15),
              0 2px 2px rgba(0, 0, 0, 0.15), 0 4px 4px rgba(0, 0, 0, 0.15),
              0 8px 8px rgba(0, 0, 0, 0.15);
            a {
              text-align: center;
              display: inline-block;
              width: 100%;
              height: 100%;
              font-size: 16px;
              font-weight: 500;
              color: #ffffff;
            }
          }
        }
        .m-cont-1 {
          background: #eef3f9;
          span {
            background: transparent;
          }
        }
        .m-cont-2 {
          background: #393c5b;
          h3 {
            color: #fff;
          }
          .mabot-btn {
            background: transparent;
          }
        }
      }
      .m-bg-1,
      .m-bg-2 {
        > img {
          width: 100%;
          transition: all 0.5s;
        }
      }
      .m-bg-1:hover,
      .m-bg-2:hover {
        > img {
          transform: scale(1.1);
        }
      }
    }
  }
  .newsarticle {
    margin-bottom: 70px;
  }
}
</style>